<template>

  <div  class="filter-container">
    <el-row>
      <el-col style="margin-left:20px;" span="3">
        <el-form-item label="初始地:">
          <el-input placeholder="请输入地址" v-model="state.pagination.startAddress" clearable/>
        </el-form-item>
      </el-col>
      <el-col style="margin-left:20px;" span="3">
        <el-form-item label="目的地:">
          <el-input placeholder="请输入地址" v-model="state.pagination.endAddress" clearable/>
        </el-form-item>
      </el-col>

      <el-col style="margin-left:20px;" span="3">
        <el-button type="primary" class="butT" @click="load">查询</el-button>
      </el-col>
    </el-row>
  </div>

  <el-table :data="state.dataList" style="width: 100%">
    <el-table-column label="路线id" align="center" prop="id"></el-table-column>
    <el-table-column label="初始地" align="center" prop="startAddress"></el-table-column>
    <el-table-column label="终点站" align="center" prop="endAddress"></el-table-column>
    <el-table-column label="距离" align="center" prop="distance"></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" width="180">
      <template v-slot="{row}">
        <el-button link type="danger" disabled size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">
    <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="state.pagination.currentPage"
        :page-size="state.pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="state.pagination.total">
    </el-pagination>
  </div>
</template>

<script setup>

import {reactive, ref} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import instance from "../../../request";

const state = reactive({
  dataList: [],//表格数据
  options: [],
  selectedOptions: [],
  formData: {},
  pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize:10,//每页显示的记录数
    total:0,//总记录数
    startAddress :"",
    endAddress:""
  }
})
//查询数据
const load = () => {
  let param="?startAddress="+state.pagination.startAddress;
  param+="&endAddress="+state.pagination.endAddress;
  instance.get("/line/"+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then(res => {
    console.log(res.data)
    state.pagination.currentPage=res.data.current;
    state.pagination.pageSize=res.data.size;
    state.pagination.total=res.data.total;
    state.dataList = res.data.records;
  })
}

const handleDelete=(row)=> {
  ElMessageBox.confirm(
      '是否删除该线路?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    instance.delete("/line/"+row.id).then((res)=>{
      if(res.flag){
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }else{
        ElMessage({
          type: 'error',
          message: '删除失败',
        })
      }
    }).finally(()=>{
      load()
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}
const  handleCurrentChange=(currentPage)=>{
  state.pagination.currentPage=currentPage;
  load()
}
load();
</script>

<style scoped>

</style>